<template>
  <el-container>
    <el-header>
      <h1>订单管理</h1>
    </el-header>
    <div style="display: flex ;margin-left: 500px">
      <el-select  v-model="types" placeholder="请选择订单类型" style="width: 150px" >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

      <el-button  @click='getOrder'  type="primary">搜索</el-button></div>
    <el-main>
      <el-table :data="order" style="width: 100%" >
        <el-table-column prop="id" label="订单编号" width="100"></el-table-column>
        <el-table-column prop="email" label="用户手机号" width="150"></el-table-column>
        <el-table-column prop="productName" label="商品名" width="120"></el-table-column>
        <el-table-column prop="productImages" label="商品图片" width="100">
          <template #default="{ row }">
          <img :src="row.productImages" alt="商品头像" style="width: 100px; height: 100px" v-if="row.productImages!==''">
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评论内容" width="110"></el-table-column>
        <el-table-column prop="money" label="订单金额" width="110"></el-table-column>
        <el-table-column prop="volume" label="商品数量" width="110"></el-table-column>
        <el-table-column prop="address" label="收货地址" width="110"></el-table-column>
        <el-table-column prop="time" label="下单时间" width="150"></el-table-column>
        <el-table-column prop="note" label="用户备注" width="150"></el-table-column>
        <el-table-column label="操作" width="100" >
          <template #default="{ row }">
          <el-button type="primary" :disabled="order[row].id===''" @click="tokeOrder(row.id)">已发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <el-pagination v-model:current-page="pageNumber" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
                     layout="jumper, total, sizes, prev, pager, next" background :total="total"
                     @size-change="onSizeChange"
                     @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
    </el-main>
  </el-container>
</template>

<script setup>

import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
const type = ref()
const pageNumber = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(3)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  getOrder()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNumber.value = num
  getOrder()
}
const options = [
  {
    value: 0,
    label: '待支付',
  },
  {
    value: 1,
    label: '已支付',
  },
  {
    value: 2,
    label: '已发货',
  },
  {
    value: 3,
    label: '已完成',
  },
  {
    value: 4,
    label: '售后中',
  },
  {
    value: 5,
    label: '已退货',
  },
]


const order = ref([
  {
    id:'',
    productId:'',
    number:'',
    commentId:'',
    money: '',
    volume:0,
    addressId:'',
    time:'',
    note:''
  },
])


//编辑用户状态
const tokeOrder=(id)=>{
  ElMessageBox.confirm(
      '请问您确定要发货吗',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await updateInfoByIdService(id,3)
        ElMessage({
          type: 'success',
          message: '发货成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消发货',
        })
      })
  setTimeout(()=>{
    getOrder()
  },1000)

}
const types = ref(1)

import {orderInfoService,updateInfoByIdService} from "@/api/order";
import {productInfoByNameService} from "@/api/product";
import {commentInfoByIdService} from "@/api/comment";
import {addressInfoByIdService} from "@/api/address";
const getOrder=async ()=>{
  let params = {
    pageNumber: pageNumber.value,
    pageSize: pageSize.value,
    types: type.value,
  }
  let result=await orderInfoService(params)
  if (result.data.total!==0){
    order.value = result.data
    total.value=result.data.total
    for (let i =0 ;i<result.data.length;i++){
      let result2=await productInfoByNameService(order.value[i].productId)
      order.value[i].productName = result2.data.name
      order.value[i].productImges = result2.data.images
      let result3 = await commentInfoByIdService(order.value[i].commentId)
      order.value[i].content = result3.data.content
      let result4 = await addressInfoByIdService(order.value[i].addressId)
      order.value[i].address = result4.data.addressContent
    }
  }
}


</script>